<template>
  <div class="home">
    <!-- 头部导航 -->
    <div class="cheader">
        <table></table>
      <div>
        <router-link to="/" class="sh">上海</router-link>
        <input type="text" placeholder="想住哪儿？" />
        <router-link to="/xiaoxi" class="ld"><img src="../../public/img/lingdang.png" alt=""/></router-link>
      </div>
    </div>
    <!-- 头部轮播图 -->
    <div class="swipe">
       <mt-swipe :auto="4000">
           <mt-swipe-item><img src="../../public/img/5b7.jpg" alt=""></mt-swipe-item>
           <mt-swipe-item><img src="../../public/img/33d.jpg" alt=""></mt-swipe-item>
           <mt-swipe-item><img src="../../public/img/a19.jpg" alt=""></mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 优选户型 -->
    <div class="youxuan">
        <!-- 标题 -->
        <div class="title">
            <p>优选户型</p>
            <span>最好的户型，给最特别的你</span>
            <router-link to="/huxing" class="a">查看更多<img src="../../public/img/youjiantou.png" alt=""></router-link>
        </div>
        <!-- 房型内容 -->
        <div class="huxinnr">
          <!-- 图片 -->
          <div v-for="i of 5" :key="i">
            <router-link to="/">
              <div class="bgimg"><img :src="add[i].other1" alt=""></div>
              <p class="ptitle">{{add[i].orientation}}</p>
              <span class="mspan">{{add[i].price}}</span>
              <span class="ptitle">元/月</span>
            </router-link>
          </div>
        </div>
    </div>
    <!-- 附近门店 -->
    <div class="mendian">
      <div class="title">
        <p>附近门店</p>
        <span> 只生活，不漂流，你值得一寓</span>
        <router-link to="/fujing" style="padding-left:80px">查看更多<img src="../../public/img/youjiantou.png" alt=""></router-link>
      </div>
      <!-- 门店图片 -->
      <div class="mendianimg">
        <div  v-for='i of 5' :key='i'>
          <router-link to="/">
            <div class="mdimg"><img :src="end[i].tepic" alt=""></div>
            <p class="pt">{{end[i].iname}}</p>
            <span class="huxins">{{cdd[i].ksome}}</span>
            <span class="moeny">{{end[i].iscore}}</span>
          </router-link>
        </div>
      </div>
   </div>  
    <!-- 全部户型 -->
    <div class="allhuxin">
        <div class="title">
          <p>全部户型</p>
          <span>房子可以租 ， 生活不将就</span>
          <router-link to="/quanbu" class="a">查看更多<img src="../../public/img/youjiantou.png" alt=""></router-link>
        </div>
        <!-- 户型分布 -->
        <div class="fenbu">
          <div class="fenbutu"  v-for="i of 4" :key="i">
            <router-link to="/">
              <div><img  class="febuimg" :src="add[i].other1" alt=""></div>
              <p class="fenbup">{{add[i].orientation}}</p>
              <span class="fenbuspan1">{{add[i].price}}</span>
              <span class="fenbuspan2">元/月</span>
            </router-link>
          </div>
        </div>
    </div>
    <!-- 底部导航 -->
    <tabbar :nav="name"></tabbar>
  </div>
</template>
<script>
export default{
  data(){
    return{
      add:[{ other1:1},{ other1:1},{ other1:1},{ other1:1},{ other1:1},],
      end:[{tepic:1},{tepic:1},{tepic:1},{tepic:1},{tepic:1}],
      cdd:'',
      name:"shouye"
    }
  },
  methods:{
    load(){
      this.axios.get("/house_structure/v1/search").then(res=>{
        this.add=res.data;
        this.add.forEach(item=>{
          if(item.other1){
            item.other1=require('../../public/img/huxin/'+item.other1)
          }
        })
      })
    },
    load2(){
      this.axios.get('/store_suo/v1/search').then(result=>{
        this.end=result.data;
      })
    },
  load3(){
    this.axios.get('/store_detail/v1/search').then(red=>{
      
      this.cdd=red.data;
    })
   }
  },
  mounted(){
    this.load();
    this.load2();
    this.load3();
  }
}
</script>

<style scoped>
/* 头部导航 */
.cheader {
    width: 100%;
  background-color: #fcaf17;

}
.cheader>div{
  display: flex;
  justify-content: space-between;
  margin-top:5px;
}
.cheader input {
  color: #ccc;
  font-size: 14px;
  border-radius: 3px;
  border:1px solid #fff; 
  width: 230px;
}
.sh{
  color: #fffef9;
  font-size: 22px;
 padding-top: 3px;
 padding-left: 3px;
}
/* 头部轮播图 */
.swipe{
    width: 100%;
    height: 270px;
}
.swipe img{
    width: 100%;
    height: 270px;
}
/* 优选户型 */
.youxuan{
    margin-top: 20px;
    
}
.title p{   
    font: 24px '微软雅黑';
    margin-bottom: 5px;
}
.title span{
    color: #a1a3a6;
}
.title>a{
 color: #a1a3a6;
 padding-left:100px;
}
/* 房型内容 */
/* 图片 */
 .huxinnr{
  font-size: 12px;
  font-weight: bold;
  display: flex;
  height: 185px;
  overflow-x:auto;
}
 .huxinnr::-webkit-scrollbar{
   display: none;
 }
.huxinnr>div{
  margin: 4px;
}
.ptitle{
  color: rgba(0, 0, 0, 0.705);
  font-size: 10px;
  margin: 5px 0; 
}
.mspan{
  color: red;
}  
.bgimg>img{
  border-radius:5px;
  width:170px;height:125px
}
/* 附近门店 */
.mendian{
  margin: 20px 0;
}
.mendianimg{
  display: flex;
   overflow-x:auto;
}
 .mendianimg::-webkit-scrollbar{
   display: none;
 }
.mdimg>img{
  width:335px;height:275px;border-radius:5px;
  margin: 10px 5px;
}
.pt{
  color: black;
  font: 18px '微软雅黑';
}
.huxins{
  font: 12px '微软雅黑';
  color: rgba(0, 0, 0, 0.705);
}
.moeny{
  color:red;font: 16px '微软雅黑'; 
  padding-left: 180px;
  font-weight: bold;
}
/* 全部户型 */
.fenbu{
  display: flex;
  flex-wrap: wrap;
}
.fenbutu{
  margin: 10px;
}
.febuimg{
  width: 163px;height: 115px;
}
.fenbup{
 color: black;
 font: 14px '微软雅黑';
}
.fenbuspan1{
  color: red;font-size:13px;font-weight: bold;
}
.fenbuspan2{
  color: black;font-size:13px;
}
.allhuxin{
  margin-bottom: 50px;
}
</style>

